* {
	padding: 0;
	margin: 0;
}

html {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
}
#root{
	width: 100%;
	height: 100%;	
}
.react-root{
	width: 100%;
	height: 100%;		
}

.home-top {
	width: 100%;
	height: 36%;
	color: #fff;
	background-color: #0cd5c1;
}

.home-title {
	width: 100%;
	height: 22%;
	text-align: center;
	vertical-align: middle;
}

.home-title span {
	font-size: 18px;
	line-height: 48px;
	vertical-align: middle;
}

.home-title img{
	position: absolute;
	right: 20px;
	top: 10px;	
	width: 30px;
	height: 30px;
}

.time_select {
	position: absolute;
	right: 50px;
	top: 50px;
}

.time_select img {
	width: 40px;
	height: 40px;
}

.header{
	width: 100%;
}
.header-row {
	width: 100%;
	color: #FFFFFF;
	background-color: #0CD5C1;
}

.header-row {
	width: 100%;
	height: 42px;
	
}
.header-back {
	width: 20%;
}
.header-back img{
	height: 24px;
	width: 24px;	
}
.header-select{
	width: 20%;
}
.header-select img{
	height: 28px;
	width: 28px;		
}
.header-title{
	width: 60%;
}


.home-totle {
	margin-top: 20px;
	text-align: center;
	color: #FFFFFF;
}

.totle-num {
	line-height: 36px;
	font-size: 32px;
}

.totle-name {
	line-height: 18px;
	font-size: 14px;
}

.home-totle2 {
	width: 100%;
	border: 0px;
	margin-top: 20px;
	margin-bottom: 5px;
	text-align: center;
	vertical-align: middle;
	border-collapse: collapse;
}

.income-num {
	width: 40%;
	line-height: 32px;
	font-size: 24px;
	border-style: solid;
	border-right-width: 2px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
}

.income-name {
	line-height: 24px;
	font-size: 14px;
	border-style: solid;
	border-right-width: 2px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
}

.pay-num {
	width: 40%;
	line-height: 32px;
	font-size: 24px;
}

.pay-name {
	line-height: 24px;
	font-size: 14px;
}

.time-wrapper {
	width: 100%;
}

.time-row {
	width: 100%;
	color: #958f91;
	background-color: #efefef;
	line-height: 28px;
	border-collapse: collapse;
}

.time-name1 {
	width: 25%;
}

.time-name2 {
	width: 50%;
}

.time-name3 {
	width: 20%;
	font-size: 12px;
}

.time-img {
	width: 5%;
}

.time-img img {
	width: 8px;
	height: 14px;
	vertical-align: -2%;
}

.home-menu {
	position: absolute;
	width: 100%;
	height: 56px;
	bottom: 0px;
	background-color: #5a5e5e;
}

.home-menu-item {
	display: inline-block;
	margin-top: 2px;
	width: 19%;
	text-align: center;
}

.home-menu img {
	width: 32px;
	height: 32px;
}

.home-menu p {
	margin-top: 1px;
	color: #fff;
	font-size: 14px;
}

.home-list {
	width: 100%;
}

.detail-row {
	width: 100%;
	margin-top: 15px;
	line-height: 64px;
	text-align: center;
	vertical-align: middle;
}

.detail-icon {
	width: 15%;
}

.detail-icon img {
	width: 35px;
	height: 35px;
	vertical-align: -15%;
}

.detail-name {
	width: 25%;
	font-size: 16px;
	color: #5A5E5E;
}

.detail-num {
	width: 46%;
	font-size: 20px;
	color: #020202;
}

.detail-txt {
	width: 14%;
	font-size: 14px;
	color: #958f91;
}

.detail-img {
	width: 5%;
}

.detail-img img {
	width: 8px;
	height: 14px;
	vertical-align: -2%;
}

@media (max-height: 672px) {
	.home-totle2 {
		margin-top: 30px;
	}
	.detail-row {
		margin-top: 28px;
		line-height: 72px;
	}
}

@media (max-height: 635px) {
	.detail-row {
		margin-top: 20px;
		line-height: 66px;
	}
}

@media (max-height: 603px) {
	.detail-row {
		margin-top: 10px;
		line-height: 66px;
	}
}

@media (max-height: 536px) {
	.home-totle {
		margin-top: 10px;
	}
	.totle-num {
		font-size: 30px;
	}
	.home-totle2 {
		margin-top: 15px;
	}
	.detail-row {
		margin-top: 5px;
		line-height: 60px;
	}
}

@media (max-height: 504px) {
	.home-totle {
		margin-top: 10px;
	}
	.totle-num {
		font-size: 30px;
	}
	.home-totle2 {
		margin-top: 10px;
	}
	.detail-row {
		margin-top: 0px;
		line-height: 58px;
	}
}


.m_header {
	display: block;
	position: absolute;
	height: 50px;
	width: 100%;
	background-color: #dc541d;
}

.m_header_option {
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 5px;
	width: 45px;
	height: 40px;
	background-image: url(../img/left_bar.png);
	background-size: cover;
}

.m_header_option:active {
	background-image: url(../img/left_bar_pr.png);
}

.m_header_title {
	display: inline-block;
	position: absolute;
	left: 60px;
	right: 60px;
	top: 12px;
	height: 40px;
	color: #fff;
	font-size: 14pt;
	text-align: center;
}

.month_layout {
	display: block;
	position: absolute;
	height: 45%;
	bottom: 0px;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
}

.month_data_list {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 3000px;
}

.month_img {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 100%;
	margin-right: 20px;
}

.month_data {
	display: block;
	position: absolute;
	top: 36%;
	bottom: 10px;
	left: 10px;
	right: 10px;
}

.month_data_item {
	display: block;
	position: relative;
	left: 40px;
	right: 20px;
	height: 30px;
	margin-bottom: 5px;
}

.month_data_title {
	display: inline-block;
	left: 0px;
	right: 30%;
	font-size: 12pt;
	text-align: right;
	color: #FFFFFF;
}

.month_data_value {
	display: inline-block;
	right: 0px;
	left: 40%;
	font-size: 12pt;
	text-align: left;
	color: #FFFFFF;
}

@media (max-height: 672px) {
	.month_data_list{
		width: 3370px;
	}
	.month_img {
		width: 260px;
		margin-right: 20px;
	}
	.month_data_item {
		left: 40px;
		margin-bottom: 10px;
	}
	.month_data_title {
		font-size: 14pt;
	}
	.month_data_value {
		font-size: 14pt;
	}
}

@media (max-height: 635px) {
	.month_data_list{
		width: 3130px;
	}
	.month_img {
		width: 240px;
		margin-right: 20px;
	}
	.month_data_item {
		left: 40px;
		margin-bottom: 10px;
	}
	.month_data_title {
		font-size: 14pt;
	}
	.month_data_value {
		font-size: 14pt;
	}
}

@media (max-height: 603px) {
	.month_data_list{
		width: 3130px;
	}
	.month_img {
		width: 220px;
		margin-right: 20px;
	}
	.month_data_item {
		left: 30px;
		margin-bottom: 10px;
	}
	.month_data_title {
		font-size: 13pt;
	}
	.month_data_value {
		font-size: 13pt;
	}
}
@media (max-height: 536px) {
	.month_data_list{
		width: 2650px;
	}
	.month_img {
		width: 200px;
		margin-right: 20px;
	}
	.month_data_item {
		left: 30px;
		margin-bottom: 5px;
	}
	.month_data_title {
		font-size: 12pt;
	}
	.month_data_value {
		font-size: 12pt;
	}
}
@media (max-height: 504px) {
	.month_data_list{
		width: 2410px;
	}
	.month_img {
		width: 180px;
		margin-right: 20px;
	}
	.month_data_item {
		left: 20px;
		margin-bottom: 5px;
	}
	.month_data_title {
		font-size: 12pt;
	}
	.month_data_value {
		font-size: 12pt;
	}
}

.line_chart {
	display: block;
	position: absolute;
	top: 50px;
	width: 100%;
	height: 40%;
}

.header {
	display: block;
	position: absolute;
	top: 0px;
	height: 50px;
	width: 100%;
	background-color: #dc541d;
}

.header_back {
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 5px;
	width: 45px;
	height: 40px;
	background-image: url(../img/back.png);
	background-size: cover;
}

.header_back:active {
	background-image: url(../img/back_pr.png);
}

.header_select {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 5px;
	width: 45px;
	height: 40px;
	background-image: url(../img/canlender_whiter.png);
	background-size: cover;
}

.header_select:active {
	background-image: url(../img/canlender_whiter_pr.png);
}

.header_title {
	display: inline-block;
	position: absolute;
	left: 60px;
	right: 60px;
	top: 12px;
	height: 40px;
	color: #fff;
	font-size: 14pt;
	text-align: center;
}

.pie_chart {
	display: block;
	position: absolute;
	top: 78px;
	height: 288px;
	width: 100%;
}

.detail_list_title {
	display: block;
	position: absolute;
	top: 364px;
	height: 40px;
	width: 100%;
	background-color: #FFFFFF;
	border-bottom: 2px solid #e5e5e5;
}

.detail_list_title span {
	position: absolute;
	left: 18px;
	top: 10px;
	font-size: 14pt;
	color: #ed5129;
}

.detail_list {
	display: block;
	position: absolute;
	top: 406px;
	width: 100%;
	bottom: 0px;
	background-color: #FFFFFF;
	overflow: auto;
	overflow-x: hidden;
}

.detail_list_item {
	display: block;
	position: relative;
	height: 38px;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 1px;
}

.detail_list_color {
	display: inline-block;
	position: absolute;
	width: 18px;
	height: 18px;
	left: 18px;
	top: 10px;
}

.detail_list_name {
	display: inline-block;
	position: absolute;
	left: 50px;
	top: 8px;
	height: 32px;
	font-size: 12pt;
}

.detail_list_value {
	display: inline-block;
	position: absolute;
	right: 20px;
	top: 10px;
	height: 32px;
	font-size: 12pt;
	text-align: right;
}

.bill_title {
	display: block;
	position: absolute;
	left: 32px;
	top: 86px;
	font-size: 15pt;
	color: #000000;
}

.bill_value {
	display: block;
	position: absolute;
	left: 32px;
	top: 128px;
	font-size: 36pt;
	color: #000000;
}

.bill_bg {
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 172px;
	bottom: 0px;
	background-image: url(../img/bg.png);
	background-size: cover;
}

.bill_content {
	display: block;
	position: absolute;
	left: 14px;
	right: 14px;
	top: 22px;
	bottom: 0px;
}

.bill_time {
	display: block;
	position: absolute;
	left: 18px;
	top: 24px;
	font-size: 14pt;
	color: #000000;
}

.bill_list {
	display: block;
	position: absolute;
	top: 80px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
	overflow-x: hidden;
}

.bill_list_item {
	display: block;
	position: relative;
	left: 0px;
	right: 0px;
	height: 75px;
	border-bottom: 1px solid #e5e5e5;
}

.bill_list_time {
	display: inline-block;
	position: absolute;
	top: 27px;
	left: 8px;
	font-size: 12pt;
	color: #000000;
}

.bill_list_name {
	display: inline-block;
	position: absolute;
	top: 30px;
	left: 70px;
	right: 130px;
	color: #000000;
	font-size: 10pt;
	text-align: center;
}

.bill_list_trade_type {
	display: inline-block;
	position: absolute;
	right: 100px;
	top: 17px;
	font-size: 10pt;
	color: #999999;
}

.bill_list_trade_value {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 14px;
	text-align: right;
	font-size: 12pt;
	color: #000000;
}

.bill_list_left {
	display: inline-block;
	position: absolute;
	right: 100px;
	top: 48px;
	font-size: 10pt;
	color: #999999;
}

.bill_list_left_value {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 48px;
	text-align: right;
	font-size: 10pt;
	color: #000000;
}

.menu {
	position: absolute;
	left: 10px;
	top: 50px;
	min-width: 100px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: center;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	z-index: 1000;
}

.menu_divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}

.menu span {
	font-size: 14pt;
	vertical-align:6px;
	padding-left: 10px;
	color: #DC541D;
}
.menu_musk {
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 10;
}

.month_menu{
	position: absolute;
	right: 10px;
	top: 50px;
	min-width: 80px;
	height: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: center;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);	
	overflow: auto;
	overflow-x: hidden;	
	z-index: 2;
}
.month_menu_divider{
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;	
}
.month_menu span{
	font-size: 14pt;
	vertical-align:-10px;
	padding-left: 5px;
	color: #DC541D;	
}
.month_menu_mask {
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1;
}
